<template>
  <view class="container">
    <u-form ref="form" :model="form" :rules="rules">
      <u-form-item label="手机号" label-width="100px" prop="phone">
        <u-input
          v-model="form.phone"
          type="number"
          placeholder="请输入手机号"
        />
      </u-form-item>
      <u-form-item label="验证码" label-width="100px" prop="code">
        <u-input v-model="form.code" type="number" placeholder="请输入验证码" />
        <u-button slot="right" :plain="true" @click="getCode"
          >{{ countdown }}秒</u-button
        >
      </u-form-item>
    </u-form>
    <u-button @click="submit">登录</u-button>
  </view>
</template>
 
<script>
export default {
  data() {
    return {
      form: {
        phone: "",
        code: "",
      },
      rules: {
        phone: [
          {
            required: true,
            message: "请输入手机号",
            trigger: "blur",
          },
        ],
        code: [
          {
            required: true,
            message: "请输入验证码",
            trigger: "blur",
          },
        ],
      },
      countdown: 60, // 验证码倒计时
    };
  },
  // 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
  onReady() {
    this.$refs.form.setRules(this.rules);
  },
  methods: {
    // 获取验证码
    getCode() {
      // 这里应该发送请求到后端获取验证码，并处理相关业务逻辑
      console.log("获取验证码逻辑");
      this.countdown = 60;
      const interval = setInterval(() => {
        if (this.countdown > 0) {
          this.countdown--;
        } else {
          clearInterval(interval);
        }
      }, 1000);
    },

    async submit() {
      // 表单验证
      const validRes = await this.$refs.form.validate();
      if (validRes) {
        // 发起登录请求
        const loginRes = await this.login(this.form);
        if (loginRes.success) {
          // 登录成功处理
          console.log("登录成功", loginRes);
          // 跳转到首页或其他页面
          var userInfo = {
            account: this.form.phone,
            code: this.form.code,
          };
          console.log("userInfo：", userInfo);
          // var openId = userInfo.openid;
          // userInfo = userInfo={"openid":"oTjKM1RdGBF_pFzBCUj1eXxDlJkk","nickname":"???","sex":0,"language":"","city":"","province":"","country":"","headimgurl":"https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTKJTU9jr88gaic5M8dF7qiaxIVLrY9zrNhB5GUIzyoCZS5icvP1Tu7kJbEbU3gko1rJOIKKicUPB5rdtQ/132","privilege":[]}
          uni.setStorageSync("userInfo", userInfo);

          uni.setStorageSync('test', JSON.stringify({ name: '张三', age: 30 }));

          uni.switchTab({
            url: "/pages/mall/index",
          });
        } else {
          // 登录失败处理
          console.log("登录失败", loginRes);
          // 提示用户错误信息
        }
      } else {
        console.log("表单验证失败");
      }
    },
    async login(credentials) {
      // 这里使用模拟的API请求进行登录
      // 实际项目中，你需要替换为真实的登录API
      return new Promise((resolve) => {
        setTimeout(() => {
          resolve({ success: true, data: {} }); // 模拟登录成功
          // 实际项目中，根据服务器响应进行处理
        }, 1000);
      });
    },
  },
};
</script>

<style scoped>
.container {
  padding: 50px;
}
</style>